<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <my-component1></my-component1>
    <hr>
    <my-component2 @myevent="callback" :number1="number1"></my-component2>
    <h3>{{ title }}</h3>
    <h4>{{ msg }}</h4>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">

    /*全局组件*/
    Vue.component('my-component1', {
        created: function () {
            console.log('created 发送ajax请求，调用后台的接口获取数据');
        },
        updated: function () {
            console.log('updated 页面数据更新后执行');
        },
        data: function () {
            return {
                message: '我是全局组件的数据！',
            }
        },
        methods: {
            clickHandler: function (e) {
                console.log(e, e.target);
            }
        },
        template: '<div> <h1 style="color: #f00;">我是全局组件-{{ message }}</h1> <button @click="clickHandler">按钮</button> </div>'
    });

    var componentObj = {
        props: ['number1'],
        created: function () {
            console.log('created 发送ajax请求，调用后台的接口获取数据');
        },
        updated: function () {
            console.log('updated 页面数据更新后执行');
        },
        data: function () {
            return {
                message: '我是局部组件的数据！',
            }
        },
        methods: {
            clickHandler: function (e) {
                console.log(e, e.target);
                this.$emit('myevent', {message: this.message});
            }
        },
        template: '<div> <h1 style="color: #f00;">我是局部组件-{{ message }} - 使用根组件的数据： {{ number1 }}</h1> <button @click="clickHandler">按钮</button> </div>'
    };

    /* new Vue 根组件*/
    var vm = new Vue({
        el: '#app',
        data: {
            title: 'vuejs 组件化',
            number1: 100,
            msg: '',// 存储子组件传递的数据
        },
        components: {
            /*局部组件*/
            'my-component2': componentObj
        },
        methods: {
            callback: function (data) {
                console.log(data, 'data数据就是子组件传递给父组件的数据');
                this.msg = data.message;
            }
        }
    })

</script>

</html>
